<template>
  <div v-if="newsInfoVisible" class="news-info-box">
    <je-modal v-model:visible="newsInfoVisible" :resize="false">
      <div class="news-info-body">
        <!-- 标题 -->
        <div class="news-title"> {{ newsItem.NOTICE_TITLE }} </div>
        <div class="news-subtitle">
          <span>
            {{ newsItem.SY_CREATEUSERNAME }} 于 {{ newsItem.SY_CREATETIME }} 发布在{{
              newsItem.NOTICE_TYPE_NAME
            }}
          </span>
          <span class="action">
            <span calss="see"> <i class="fa fa-eye" /> {{ newsItem.NOTICE_YDL }} </span>
            <span class="zan" :class="{ zaned: thumbsStatus }" @click="handldThumbs">
              <i
                :class="{
                  'fal fa-thumbs-up': !thumbsStatus,
                  'fas fa-thumbs-up': thumbsStatus,
                }"
              />
              {{ thumbsNum }}
            </span>
          </span>
        </div>
        <div class="news-context" v-html="newsItem.NOTICE_CONTEXT"></div>
        <je-button type="primary" class="news-close-button" @click="handleClose">关闭</je-button>
        <i class="news-body-close fal fa-times" @click="handleClose" />
      </div>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue';
  import { Modal, Button } from '@jecloud/ui';
  import { getCurrentUser } from '@jecloud/utils';
  import { UpdateNoticeStatus } from '@/api';
  export default defineComponent({
    name: 'NewsInfo',
    components: {
      JeModal: Modal,
      JeButton: Button,
    },
    props: {
      newsItem: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['loadNotice'],
    setup(props, { emit }) {
      const userId = getCurrentUser()?.id; //用户id
      const state = reactive({
        newsInfoVisible: false,
        thumbsStatus: false, //点赞点状态
        thumbsNum: 0, //点赞数量
      });
      const methods = {
        handldThumbs() {
          //点赞
          if (!state.thumbsStatus) {
            const param = {
              tableCode: 'JE_CORE_NOTICE',
              NOTICE_DZUSERIDS: userId,
              JE_CORE_NOTICE_ID: props.newsItem.JE_CORE_NOTICE_ID,
            };
            UpdateNoticeStatus(param).then((res) => {
              if (res.code == 1000 && res.success) {
                state.thumbsStatus = true;
                state.thumbsNum += 1;
                emit('loadNotice');
              }
            });
          }
        },
        isThumbsUp(item) {
          //验证该文章是否点赞过
          state.thumbsNum = item.NOTICE_DZL;
          if (item.NOTICE_DZUSERIDS) {
            let dzUsers = item.NOTICE_DZUSERIDS.split(',');
            state.thumbsStatus = dzUsers.includes(userId);
          } else {
            state.thumbsStatus = false;
          }
        },
        handleClose() {
          //关闭新闻窗口
          const lookUserIds = props.newsItem.NOTICE_LOOKUSERIDS;
          if (lookUserIds) {
            const readUserIds = lookUserIds.split(',');
            if (readUserIds.includes(userId)) {
              state.newsInfoVisible = false;
            } else {
              //未读
              // emit('loadNotice');
              state.newsInfoVisible = false;
            }
          } else {
            //未读
            // emit('loadNotice');
            state.newsInfoVisible = false;
          }
        },
      };
      watch(
        () => props.newsItem,
        (val) => {
          if (val) {
            methods.isThumbsUp(val);
          }
        },
        { deep: true, immediate: true },
      );
      onMounted(() => {});
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .news-info-box .je-modal--box {
    height: 100% !important;
    width: 1250px !important;
    border-radius: 0;
  }
  .news-info-box .je-modal--wrapper {
    z-index: 200 !important;
  }
  .news-info-box .je-modal--wrapper.is--visible.is--mask:before {
    background-color: #f0f2f5;
  }
  .news-info-box .je-modal--header {
    display: none;
  }
  .news-info-box .je-modal--body {
    height: 100%;
    padding: 0 20px;
  }
  .news-info-box .je-modal--wrapper.type--modal .je-modal--box,
  .news-info-box .je-modal--wrapper.type--dialog .je-modal--box {
    box-shadow: 0 0 0 0 transparent;
  }
</style>
<style scoped lang="less">
  .news-info-box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
  }
  .news-info-body {
    overflow: auto;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
    .news-title {
      font-size: 24px;
      text-align: center;
      padding: 10px;
      font-weight: bold;
      margin-top: 30px;
    }
    .news-subtitle {
      width: 100%;
      position: relative;
      text-align: center;
      font-size: 14px;
      .action {
        position: absolute;
        left: 50%;
        margin-left: 200px;
        .zan,
        .see {
          margin: 0 5px;
          i {
            font-size: 14px;
          }
        }
        .zan {
          cursor: pointer;
          &.zaned {
            cursor: auto;
            i {
              color: #f7ba2a;
            }
          }
        }
      }
    }
    .news-body-close {
      position: fixed;
      right: 20px;
      top: 20px;
      font-size: 20px;
      color: #8d98ab;
      cursor: pointer;
    }
    .news-body-close:hover {
      color: #2f6bcf;
    }
    .news-context {
      padding: 20px 10px;
    }
    .news-close-button {
      position: fixed;
      bottom: 20px;
      left: 50%;
      border: none;
      transform: translate(-50%);
    }
  }
  .news-info-body::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
</style>
